<template>
	<div class="detail-container">
		<div>
			<el-divider></el-divider>
			<h3 style="border-left: 5px solid #416ED9;padding-left: 5px;">入库信息
			</h3>
			<el-row>
				<el-col :span="8">
					<span>物料编号：{{tbWmsMaterialReceiptLine.materialNo}}</span>
				</el-col>
				<el-col :span="8">
					<span>物料名称：{{tbWmsMaterialReceiptLine.createCompanyName}}</span>
				</el-col>
				<el-col style="height: 40px;" :span="8">
					<span>入库单号：{{tbWmsMaterialReceiptLine.createUserName}}</span>
				</el-col>
				<el-col :span="8">
					<span>客户名称：{{tbWmsMaterialReceiptLine.customerName}}</span>
				</el-col>
				<el-col :span="8">
					<span>体积：{{tbWmsMaterialReceiptLine.volume}}</span>
				</el-col>
        <el-col :span="8">
        	<span>重量：{{tbWmsMaterialReceiptLine.weight}}</span>
        </el-col>
				<el-col :span="8">
					<span>数量：{{tbWmsMaterialReceiptLine.quantity}}</span>
				</el-col>
			</el-row>
      <el-col :span="8">
      	<span>单位：{{tbWmsMaterialReceiptLine.measUnitNo}}</span>
      </el-col>
      <el-col :span="8">
      	<span>结算基于：{{tbWmsMaterialReceiptLine.shipByPackOrqty}}</span>
      </el-col>
      <el-col :span="8">
      	<span>图号：{{tbWmsMaterialReceiptLine.skuCode}}</span>
      </el-col>
			<el-divider></el-divider>

			<el-divider></el-divider>
      <el-row>
      	<el-col :span="12">
      		<span style="float: left;margin-left:30px;width: 100%;">库位信息</span>
      	</el-col>
        <el-col :span="12">
        	<span style="float: right;margin-left:，150px;width: 90%;">财务结算</span>
        </el-col>
      </el-row>
      <el-row>
           	<el-col :span="12">
      			<el-table ref="itemTable" :data="tbWmsMaterialReceiptLine.locationItems"
      				style="width: 95%;margin-top: 10px;float: right;font-size: 15px;" border>
      				<el-table-column label="序号" type="index" align="center" />
      				<el-table-column label="附件名称" align="center">
      					<template slot-scope="scope">
      						{{ scope.row.name }}
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="relatedItemAttachmentview(scope.row)">查看</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="操作" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="openPrintDialog(scope.row)">打印</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="startDownload(scope.row)">下载</el-button>
      					</template>
      				</el-table-column>
      				<!--          <el-table-column label="" align="center" show-overflow-tooltip width="90">-->
      				<!--          	<template slot-scope="scope">-->
      				<!--          		<el-button type="text" @click="deleteAttach(scope.row)">删除</el-button>-->
      				<!--          	</template>-->
      				<!--          </el-table-column>-->
      			</el-table>
      </el-col>
      <el-col :span="12">
      			<el-table ref="itemTable" :data="tbWmsMaterialReceiptLine.lineArs"
      				style="width: 90%;margin-top: 10px;float: right;font-size: 15px;" border>
      				<el-table-column label="序号" type="index" align="center" />
      				<el-table-column label="附件名称" align="center">
      					<template slot-scope="scope">
      						{{ scope.row.name }}
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="relatedItemAttachmentview(scope.row)">查看</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="操作" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="openPrintDialog(scope.row)">打印</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="startDownload(scope.row)">下载</el-button>
      					</template>
      				</el-table-column>
      				<!--          <el-table-column label="" align="center" show-overflow-tooltip width="90">-->
      				<!--          	<template slot-scope="scope">-->
      				<!--          		<el-button type="text" @click="deleteAttach(scope.row)">删除</el-button>-->
      				<!--          	</template>-->
      				<!--          </el-table-column>-->
      			</el-table>
      </el-col>
      			</el-row>


 <el-row>
      	<el-col :span="12">
      		<span style="float: left;margin-left:30px;width: 100%;">出库记录</span>
      	</el-col>
        <el-col :span="12">
        	<span style="float: right;margin-left:，150px;width: 90%;">上架日志</span>
        </el-col>
      </el-row>
      <el-row>
           	<el-col :span="12">
      			<el-table ref="itemTable" :data="tbWmsMaterialReceiptLine.deliverys"
      				style="width: 95%;margin-top: 10px;float: right;font-size: 15px;" border>
      				<el-table-column label="序号" type="index" align="center" />
      				<el-table-column label="附件名称" align="center">
      					<template slot-scope="scope">
      						{{ scope.row.name }}
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="relatedItemAttachmentview(scope.row)">查看</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="操作" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="openPrintDialog(scope.row)">打印</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="startDownload(scope.row)">下载</el-button>
      					</template>
      				</el-table-column>
      				<!--          <el-table-column label="" align="center" show-overflow-tooltip width="90">-->
      				<!--          	<template slot-scope="scope">-->
      				<!--          		<el-button type="text" @click="deleteAttach(scope.row)">删除</el-button>-->
      				<!--          	</template>-->
      				<!--          </el-table-column>-->
      			</el-table>
      </el-col>
      <el-col :span="12">
      			<el-table ref="itemTable" :data="tbWmsMaterialReceiptLine.putInLocs"
      				style="width: 90%;margin-top: 10px;float: right;font-size: 15px;" border>
      				<el-table-column label="序号" type="index" align="center" />
      				<el-table-column label="附件名称" align="center">
      					<template slot-scope="scope">
      						{{ scope.row.name }}
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="relatedItemAttachmentview(scope.row)">查看</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="操作" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="openPrintDialog(scope.row)">打印</el-button>
      					</template>
      				</el-table-column>
      				<el-table-column label="" align="center" show-overflow-tooltip width="90">
      					<template slot-scope="scope">
      						<el-button type="text" @click="startDownload(scope.row)">下载</el-button>
      					</template>
      				</el-table-column>

      			</el-table>
      </el-col>
      			</el-row>


			<!--  <el-button v-hasPermission="['order:salesOrder:insert']" type="info" icon="el-icon-upload2" size="mini" @click="batchGenerateSettlement">选择生成结算单</el-button>
    -->
			<!-- 附件 -->


		</div>

		<el-dialog :title="selectWmsContainerDialog.title" :visible.sync="selectWmsContainerDialog.visible"
			:close-on-click-modal="false" width="1200px" append-to-body>
			<div style="margin-bottom: 20px;">
				<el-select style="margin-right: 20px;" v-model="locationType">
				    <el-option
				      v-for="item in areaList"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				<el-button type="primary" icon="el-icon-search" size="medium" @click="handleWmsLocationQuery">查询</el-button>
			</div>

			<div class="container">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div style="display: flex;">
							<div style="margin-top: 10px;font-weight: bold;font-size: 18px ;">库架编号</div>
							<el-input size="small" v-model='selectWmsContainerDialogData.storeLotNo' style="width: 200px;margin: 0 20px;"
								placeholder="请选择库架编号" clearable />
								<el-button type="primary" icon="el-icon-thumb" size="medium" @click="confirmSelectWmsContainerDialog">确 定</el-button>
								<el-button @click="closeSelectWmsContainerDialog" icon="el-icon-close" size="medium">取 消</el-button>
						</div>
					</div>
					<el-row :gutter="12">
						<el-col v-for="item in storageTable" :span="4">
							<div @click="getTableData(item.locationNo,item.tier,item.lane)">
								<el-card class="box-card3" shadow="hover">
									<div slot="header" style="text-align: center;" class="clearfix">
										<span>{{item.locationNo}}</span>
									</div>
									<div class="fontSize">已装：{{item.currentLoad}} KG</div>
									<div class="fontSize">限重：{{item.maxLoad}} KG</div>
									<el-progress :color="customColors" class="progress" :percentage="percentage">
									</el-progress>
								</el-card>
							</div>
						</el-col>
					</el-row>
					<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current"
						:limit.sync="page.pageSize" @pagination="handleWmsLocationQuery" />

				</el-card>
				<el-card class="box-card1">
					<div slot="header" class="clearfix">
						<span style="margin: 0 auto;">{{clearlyTitle + ' '}}库位详细</span>
					</div>

					<el-table :data="tableData" height="100vh" border stripe style="width: 100%">
						<el-table-column prop="materialName" align="center" label="物品名称">
						</el-table-column>
						<el-table-column prop="quantity" align="center" label="数量">
						</el-table-column>
					</el-table>
				</el-card>
			</div>

			<div slot="footer" class="dialog-footer">
				<!-- 		<el-button type="primary" @click="confirmSelectWmsContainerDialog">确 定</el-button>
				<el-button @click="closeSelectWmsContainerDialog">取 消</el-button> -->
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import TbWmsMaterialReceiptApi from '@/api/web/TbWmsMaterialReceiptApi'
import TbWmsMaterialReceiptLineApi from '@/api/web/TbWmsMaterialReceiptLineApi'

	import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
	import TbWmsMaterialInLocationApi from '@/api/web/TbWmsMaterialInLocationApi'
	import CustomerApi from '@/api/basic/CustomerApi'
	import UserApi from '@/api/system/UserApi'
	import SysOrgApi from '@/api/system/OrgApi'
	import Treeselect from '@riophae/vue-treeselect'
	import AuthUtils from '@/utils/AuthUtils'
	import appConstant from '@/constant/AppConstant'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		name: 'TbWmsMaterialReceiptView',
		filters: {
			receStatusFilter(item) {
				const values = appConstant.receStatusList.filter(value => value.key === item)
				if (values && values.length > 0) {
					return values[0].label
				} else {
					return ''
				}
			}
		},
		components: {
			Treeselect
		},
		data() {
			return {
				options: {
					orderTypeOptions: [],
					sourceTypeOptions: [],
					tbWmsMaterialReceiptLineStatusOptions: [],
					salesManOptions: [],
					payTypeOptions: [],
					goodsOptions: [],
					reasonOptions: appConstant.reasonList,
					customerOptions: [],
					regionOptions: [],
					orgOptions: [], // 组织树选项
					userOptions: [],
					expressCompanyOptions: []
				},
				page: {
					current: 1,
					pageSize: 24,
					total: 0,
					records: []
				},
				selectWmsContainerDialog: {
					title: '选择库位',
					visible: false
				},
				selectWmsContainerDialogData: {
					storeLotNo: null,
					rfid: null,
					id: null
				},
				storageTable: [],
				tableData: [],
				clearlyTitle: '',
				percentage: 23.9,
				areaList: [{
						value: '轻型物品区',
						label: '轻型物品区'
					},
					{
						value: '普通物品区',
						label: '普通物品区'
					},
					{
						value: '贵重物品区',
						label: '贵重物品区'
					},
					{
						value: '重型物品区',
						label: '重型物品区'
					},
					{
						value: '超规物品区',
						label: '超规物品区'
					},
				],
				locationType: '轻型物品区',
				customColors: [{
						color: '#1989fa',
						percentage: 55
					},
					{
						color: '#e6a23c',
						percentage: 60
					},
					{
						color: '#e6a23c',
						percentage: 79
					},
					{
						color: '#f56c6c',
						percentage: 80
					},
					{
						color: '#f56c6c',
						percentage: 100
					}
				],
				//   locationRecords: [],
				//    storageCompanyCode,


				tbWmsMaterialReceiptLine: {
					items: []
				},
				multipleSelection: [],
				isSingle: true,
				isMultiple: true
			}
		},
		computed: {
			/* batchNo() {
			   return this.$route.params.batchNo
			 } */
		},
		created() {
			//  this.init()
			//  this.loadOptions()
			const id = this.$route.params.id
			if (id) {
				TbWmsMaterialReceiptLineApi.getWithDeliverysAndArs(id).then(response => {
					this.tbWmsMaterialReceiptLine = response.data

				})
			}
		},

		methods: {
			init() {
				TbWmsMaterialReceiptLineApi.getByBatchNo(this.batchNo).then(response => {
					this.tbWmsMaterialReceiptLine = response.data
				})
			},

			handleQuery() {
				const id = this.$route.params.id
				if (id) {
					TbWmsMaterialReceiptLineApi.get(id).then(response => {
						this.tbWmsMaterialReceiptLine = response.data

					})
				}
			},
			loadOptions() {
				/* 	DictValueApi.list({
						dictCode: 'oms_sales_order_type'
					}).then(response => {
						this.options.orderTypeOptions = response.data
					})
					DictValueApi.list({
						dictCode: 'oms_sales_order_source'
					}).then(response => {
						this.options.sourceTypeOptions = response.data
					})
					DictValueApi.list({
						dictCode: 'oms_sales_order_status'
					}).then(response => {
						this.options.tbWmsMaterialReceiptLineStatusOptions = response.data
					}) */

				/* 	UserApi.roleUsers({
						roleId: '1356074716665876480'
					}).then(response => {
						this.options.salesManOptions = response.data
					})
					CustomerApi.list().then(response => {
						this.options.customerOptions = response.data
					})
					RegionApi.tree().then(response => {
						this.options.regionOptions = this.$common.list2Tree(response.data)
					}) */
				SysOrgApi.treeSelect().then(response => {
					this.options.orgOptions = response.data
				})
				this.queryParams.customerId = this.tbRelateItemTakeDialogData.backDepartmentCode
				UserApi.list(this.queryParams).then(response => {
					this.options.userOptions = response.data
				})
				/* 	ExpressCompanyApi.list().then(response => {
						this.options.expressCompanyOptions = response.data
					}) */
			},
			/* 	stepStatusFormat(orderStatus) {
					if (orderStatus === 'created') {
						return 2
					}
					if (orderStatus === 'submitted') {
						return 3
					}
					if (orderStatus === '40') {
						return 4
					}
					if (orderStatus === 'confirmed') {
						return 5
					}
					if (orderStatus === '60') {
						return 6
					}
					if (orderStatus === 'delivery_plan') {
						return 7
					}
					if (orderStatus === 'delivered') {
						return 8
					}
					if (orderStatus === 'completed') {
						return 9
					}
					return 1
				}, */
			/* orderStatusFormat(status) {
				return this.$common.getDictValueName(this.options.tbWmsMaterialReceiptLineStatusOptions, status)
			},
			orderTypeFormat(type) {
				return this.$common.getDictValueName(this.options.orderTypeOptions, type)
			},
			sourceTypeFormat(type) {
				return this.$common.getDictValueName(this.options.sourceTypeOptions, type)
			},
			payTypeFormat(type) {
				return this.$common.getDictValueName(this.options.payTypeOptions, type)
			}, */
			getTableData(e, a, b) {
				this.selectWmsContainerDialogData.storeLotNo = e
				TbWmsMaterialInLocationApi.list({
					locationNo: e
				}).then(response => {
					this.tableData = response.data
					this.clearlyTitle = e
					console.log(response.data)
				})
			},
			updateRemark(tbRelateItemOptTakeDetail) {
				debugger
				TbRelateItemOptTakeDetailApi.edit(tbRelateItemOptTakeDetail).then(response => {
					console.log(response.data)
				})
			},
			/* 	openSelectWmsContainerDialog(row) { */
			/* const params = {
			   storageCompanyCode: this.tbWmsMaterialReceiptLine.storageCompanyCode,

			}
			TbWmsLocationApi.list(params).then(response => {
			   this.locationRecords = response.data.records

			 } */
			openSelectWmsContainerDialog() {

				const id = this.multipleSelection.map(item => item.id)[0]
				const rfid = this.multipleSelection.map(item => item.rfidCode)[0]
				const status = this.multipleSelection.map(item => item.status)[0]

				if (status === 'inWarehouse') {
					this.$alert("已登记存放地址信息，不可再次登记。可作移位操作");
					return false;
				}
				this.selectWmsContainerDialogData.id = id;
				this.selectWmsContainerDialogData.rfid = rfid;
				//this.selectWmsContainerDialogData.rfid = row.rfidCode;
				this.selectWmsContainerDialog.visible = true;
				this.selectWmsContainerDialog.title = '选择存放地';
				this.handleWmsLocationQuery();
			},

			handleWmsLocationQuery() {
				if (this.selectWmsContainerDialogData.storeLotNo != null && this.selectWmsContainerDialogData.storeLotNo !=
					"") {
					TbWmsLocationApi.page({
						LOCATION_TYPE: this.locationType,
						locationNo: this.selectWmsContainerDialogData.storeLotNo
					}, this.page).then(response => {
						this.storageTable = response.data.records
						this.page.total = response.data.total
						this.loading = false
					})
				} else {
					TbWmsLocationApi.page({
						LOCATION_TYPE: this.locationType
					}, this.page).then(response => {
						this.storageTable = response.data.records
						this.page.total = response.data.total
						this.loading = false
					})
				}
			},
			closeSelectWmsContainerDialog() {
				this.selectWmsContainerDialog.visible = false
			},
			confirmSelectWmsContainerDialog() {
				if (!this.selectWmsContainerDialogData.rfid) {
					this.$message.success('射频标签没有绑定，请先处理！')
					return false;
				}
				if (this.selectWmsContainerDialogData.storeLotNo) {
					TbRelateItemOptTakeDetailApi.inBoundWarehouse(this.selectWmsContainerDialogData).then(response => {
						this.$message.success('入库操作成功')
						this.selectWmsContainerDialog.visible = false
						this.handleQuery()
					})
				} else {
					this.$alert("必须选择库位");
				}
			},
			handleSelectionChange(selection) {
				this.multipleSelection = selection
				this.isSingle = selection.length !== 1
				this.isMultiple = !selection.length
			}

	}
  }
</script>
<style scoped>
	.detail-container {
		width: 95%;
		/* 	//padding: 20px 20px 20px 20px; */
		margin: 0px auto;
	}

	span {
		font-weight: bold;
		font-size: 13px;
	}

	.operate-container {
		background: #F2F6FC;
		height: 80px;
		margin: -20px -20px 0;
		line-height: 80px;
	}

	.operate-button-container {
		float: right;
		margin-right: 20px
	}


	.table-cell {
		height: 60px;
		line-height: 40px;
		border-right: 1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
		padding: 10px;
		font-size: 14px;
		color: #606266;
		text-align: center;
		overflow: hidden;
	}

	.table-cell-title {
		border-right: 1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
		padding: 10px;
		background: #F2F6FC;
		text-align: center;
		font-size: 14px;
		color: #303133;
	}

	.container {

		display: flex;

	}

	.fontSize {
		font-size: 12px;
		letter-spacing: 2px;
		padding: 2px;
	}

	.box-card {
		width: 75%;
		/* height: 100vh; */

	}

	.box-card1 {
		width: 25%;
		margin-left: 30px;
	}

	.box-card3 {
		width: 130px;
		background: #fafafa;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.progress {
		width: 120%;
	}
</style>
